<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2023/6/17
  Time: 16:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>学生信息展示</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="genderChart" style="height: 300px;"></div>
<div id="semesterChart" style="height: 300px;margin-top:50px;" ></div>
<script>
    // 性别统计
    var genderChart = echarts.init(document.getElementById('genderChart'));
    var genderOption = {
        title: {
            text: '性别统计',
            left: 'center'
        },
        tooltip: {},
        legend: {
            data:['Male', 'Female'],
            bottom: 0
        },
        series: [{
            type: 'pie',
            data: [
                {name: 'Male', value: 98},
                {name: 'Female', value: 85}
            ]
        }],
        color: ['rgb(131,175,155)', 'rgb(252,157,154)']
    };
    genderChart.setOption(genderOption);

    // 学期统计
    var semesterChart = echarts.init(document.getElementById('semesterChart'));
    var semesterOption = {
        title: {
            text: '各学期性别统计',
            left: 'center'
        },
        tooltip: {},
        legend: {
            data:['Male', 'Female'],
            bottom: 0
        },
        xAxis: {
            type: 'category',
            data: ['Semester 1', 'Semester 2', 'Semester 3']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: 'Male',
            type: 'bar',
            data: [32, 27, 37]
        }, {
            name: 'Female',
            type: 'bar',
            data: [23, 36, 27]
        }],
        color: ['rgb(131,145,167)', 'rgb(232,158,169)']
    };
    semesterChart.setOption(semesterOption);
</script>
</body>
</html>
